<template>
  <div class="app-container own-app-container">
    <el-main>
      <el-table size="mini" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" v-loading="tabLoading"
        style="width: 100%" :row-class-name="tableRowClassName" border @selection-change="handleSelectionChange"
        :default-sort="{prop: 'date', order: 'descending'}" highlight-current-row row-key="id">
        <el-table-column type="index" label="序号" width="50" header-align="center" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="200" header-align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="emergency" label="紧急程度" width="120" show-overflow-tooltip
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.emergency==1">紧急</span>
            <span v-if="scope.row.emergency==2">较紧急</span>
            <span v-if="scope.row.emergency==3">普通</span>
            <span v-if="scope.row.emergency==4">不紧急</span>
          </template>
        </el-table-column>
        <el-table-column prop="important" label="重要程度" width="120" show-overflow-tooltip
          align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.important==1">重要</span>
            <span v-if="scope.row.important==2">较重要</span>
            <span v-if="scope.row.important==3">普通</span>
            <span v-if="scope.row.important==4">不重要</span>
          </template>
        </el-table-column>
        <el-table-column label="截止时间" prop="deadline" width="140" header-align="center" align="center"
          show-overflow-tooltip></el-table-column>
        <el-table-column prop="off_tip" label="关闭提醒" width="120" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.use_tip==0">否</span>
            <span v-if="scope.row.use_tip==1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="关闭时间" prop="off_tip_at" width="160" header-align="center" align="center" />
        <el-table-column label="任务完成" prop="complete" width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.complete==0">否</span>
            <span v-if="scope.row.complete==1">是</span>
          </template>
        </el-table-column>
        <el-table-column label="完成时间" prop="complete_at" width="160" header-align="center" align="center" />
        <el-table-column label="派发人" prop="name" width="120" header-align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" min-width="100" align="center" fixed="right">
          <template slot-scope="scope">
            <div class="operation">
              <el-button-group>
                <el-button type="success" icon="el-icon-document-checked" size="mini" @click.native="showComplete(scope.row)">完成</el-button>
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页数据 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="current"
        :page-sizes="[10, 20, 50]" :page-size="listParams.page_size" layout="total, sizes, prev, pager, next, jumper"
        :total="total"></el-pagination>
    </el-main>

    <el-dialog :close-on-click-modal="false" :title="('完成说明')" center :visible.sync="dialogCU" width="80%"
      @close="dialogCUClose('cuForm')">
      <el-form ref="cuForm" v-loading="dialogCULoading" :rules="cuRules" :model="cuForm" label-width="120px" center>
        <el-row class="row-bg">
          <el-col :span="24">
            <el-form-item label="完成说明" prop="complete_memo">
              <el-col :span="24">
                <el-input clearable type="textarea" v-model.trim="cuForm.complete_memo" :rows="4" maxlength="30"
                  show-word-limit placeholder="完成说明"></el-input>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="dialogCU=false">取 消</el-button>
        <el-button type="primary" @click.native="complete(cuForm.id)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    my_receive_list as list,
    operatorCompleteMission
  } from '@/api/personnel/mission'
  import {
    Message
  } from 'element-ui';
  // 富文本
  import QuillEditorOwn from '@/components/QuillEditorOwn'
  export default {
    components: {
      QuillEditorOwn
    },
    name: 'PersonalMySendList',
    // beforeRouteLeave(to, from, next) {
    //   this.$destroy();
    //   next();
    // },

    data() {

      return {
        // list table
        tableData: [], // 列表数据
        selectIds: [], // 多选选项id
        emergencyList: [
          {id:1, name:'紧急'},
          {id:2, name:'较紧急'},
          {id:3, name:'普通'},
          {id:4, name:'不紧急'}
        ],
        importantList: [
          {id:1, name:'重要'},
          {id:2, name:'较重要'},
          {id:3, name:'普通'},
          {id:4, name:'不重要'}
        ],
        selectIds: [], // 多选选项id
        tabLoading: false,
        total: null, // 总页数
        current: 1, // 当前页
        is_use_tip: 0, // 是否开启提醒
        is_use_continue_tip: 0, // 是否开启持续提醒
        // CU dialog
        dialogCULoading: false,
        dialogCU: false,
        opereators: [
          {id:1, name:'超管'},
          {id:2, name:'张三'},
          {id:3, name:'李四'}
        ],
        cuForm: {
          id: null,
          complete_memo: null
        },
        cuRules: {

        },

        listParams: {
          page: 1,
          page_size: 10
        }, // list参数
        searchForm: {

        },
        loading: null,
      }
    },
    mounted() {
      this.getList()
    },
    created() {
      // this.$store.dispatch('flow/getFlowObj');
    },
    methods: {
     showComplete(row) {
       const _this = this
       _this.cuForm = Object.assign({}, row)
       _this.$nextTick(() => {
         _this.dialogCU = true
         _this.dialogCULoading = false
       })
     },
      complete(id) {
        this.$confirm('确认要完成?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            dangerouslyUseHTMLString: true
          })
          .then(() => {
            let ids = [id];
            var obj = Object.assign({}, this.cuForm)
            let complete_memo = obj.complete_memo
            operatorCompleteMission(ids, complete_memo).then(res => {
              let {
                code,
                date,
                message
              } = res;
              this.dialogCU = false
              this.dialogCULoading = false
              this.getList();
              Message({
                message,
                type: "success",
                duration: 1000
              });
            });
          }).catch()
      },
      // 关闭弹窗
      dialogCUClose(formName) {
        switch (formName) {
          case 'cuForm':
            this.$refs['cuForm'].clearValidate()
            break
        }
      },
      getList() {
        this.tabLoading = true
        return list(this.listParams)
          .then(res => {
            let {
              data: {
                records,
                total
              }
            } = res;

            this.tableData = records.map(item => {
              return item
            });
            this.total = total;
            this.tabLoading = false;
          })
          .catch(() => {
            this.tabLoading = false
          })
      },

      resetForm() {
        return {
          complete_memo: null
        }
      },

      // 表单多选
      handleSelectionChange(val) {
        this.selectIds = val.map(item => item.id)
      },
      // 分页 -pageSize改变
      handleSizeChange(val) {
        this.listParams.page_size = val
        this.getList()
      },
      // 分页 -pageNum改变
      handleCurrentChange(val) {
        this.listParams.page = val
        this.getList()
      },
      //带状态表格
      tableRowClassName({
        row
      }) {
        return "";
      },

    }
  }
</script>

<style>
</style>
